<template>
  <div class="order">
    <a-card title="请购单列表">
      <a-form class="formHeader">
        <a-row justify="start" :gutter="24">
          <a-col class="formHeader-criteria">
            <a-row :gutter="16">
              <a-col span="8">
                <a-form-item label="请购单别" label-col-flex="80px">
                  <a-input v-model="checkFrom.requisitionType" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="请购单号" label-col-flex="80px">
                  <a-input v-model="checkFrom.requisitionNo" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>

              <a-col span="8">
                <a-form-item label="单据日期" label-col-flex="80px">
                  <a-date-picker v-model="checkFrom.time" style="width: 100%" allow-clear />
                </a-form-item>
              </a-col>

              <a-col span="8">
                <a-form-item label="品名" label-col-flex="80px">
                  <a-input v-model="checkFrom.productName" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="品号" label-col-flex="80px">
                  <a-input v-model="checkFrom.productNumber" allow-clear @keyup.enter="init" />
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="请购日期" label-col-flex="80px">
                  <a-date-picker v-model="checkFrom.requirementDate" style="width: 100%" allow-clear />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="formHeader-btn">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="init">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <formButtonGroup
        v-model:columns="columns"
        v-model:size="size"
        :config="config"
        :search-bar="searchBar"
        @refresh="init"
        @change-search-bar="changeSearchBar"
      >
        <template #leftboon>
          <a-space>
            <div class="order-pimasn">
              <span class="order-pimasn-onminc">预定交货日区间相同存货编号合并</span>
              <a-range-picker v-model="featureData.sectionTime" />
            </div>
            <div class="order-pimasn">
              <span class="order-pimasn-onminc">合并方式</span>
              <a-select v-model="featureData.mergingMethod" placeholder="请选择合并方式">
                <a-option>同供应商同单据合并</a-option>
                <a-option>同供应商合并</a-option>
                <a-option>同供应商同品号合并(无视时间区间)</a-option>
              </a-select>
            </div>

            <div class="order-pimasn">
              <span class="order-pimasn-onminc">转入请购单主表备注</span>
              <a-checkbox v-model="featureData.primaryMeter">{{ featureData.primaryMeter ? '开启' : '关闭' }}</a-checkbox>
            </div>
            <div class="order-pimasn">
              <span class="order-pimasn-onminc">转入请购单子表备注</span>
              <a-checkbox v-model="featureData.sublist">{{ featureData.sublist ? '开启' : '关闭' }}</a-checkbox>
            </div>
            <div class="order-pimasn">
              <span class="order-pimasn-onminc">请购部门</span>
              <a-select v-model="checkFrom.requisitionDepartment" @keyup.enter="init" @change="init">
                <a-option v-for="(value, index) in section" :key="index" :value="value.departmentNumber">{{
                  value.departmentName
                }}</a-option>
              </a-select>
            </div>
          </a-space>
        </template>
      </formButtonGroup>
      <div class="formHeader-buttom">
        <a-button type="primary" status="danger" @click="resetSelectItem">重置选择项目</a-button>
      </div>

      <vxe-table
        v-if="tabelValue"
        ref="tableRef"
        :data="tabelList"
        size="mini"
        show-footer
        :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
        :column-config="{ isCurrent: true, resizable: true }"
        :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :menu-config="menuConfig"
        stripe
        border
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
        @menu-click="contextMenuBodyClickEvent"
      >
        <vxe-column type="checkbox" width="60" align="center"></vxe-column>
        <vxe-column field="requisitionType" title="单别" width="80" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.requisitionType }}</template>
        </vxe-column>
        <vxe-column field="requisitionNo" width="100" title="单号" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.requisitionNo }}</template>
        </vxe-column>
        <vxe-column field="requisitionNumber" width="80" title="序号" show-overflow align="center">
          <template #default="{ row }"> {{ row.requisitionNumber }}</template>
        </vxe-column>
        <vxe-column field="productNumber" width="200" title="品号" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.productNumber }}</template>
        </vxe-column>
        <vxe-column field="productName" width="200" title="品名" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.productName }}</template>
        </vxe-column>

        <vxe-column field="specifications" width="200" title="规格" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.specifications }}</template>
        </vxe-column>
        <vxe-column field="reqDepartmentID" width="100" title="请购部门" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.reqDepartmentID }}</template>
        </vxe-column>
        <vxe-column field="reqDepartment" width="100" title="部门名称" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.reqDepartment }}</template>
        </vxe-column>
        <vxe-column field="supplierName" width="200" title="供应商" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.supplierName }}</template>
        </vxe-column>
        <vxe-column field="supplierName" width="100" title="含税" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ isNullPm(row.taxCategory) ? '零税率' : categoriesTaxesList(row.taxCategory).label }}</template>
        </vxe-column>
        <vxe-column field="number" width="100" title="请购数量" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.number }}</template>
        </vxe-column>
        <vxe-column field="unitPrice" width="100" title="请购单价" show-overflow align="center">
          <template #default="{ row }"> {{ row.unitPrice }}</template>
        </vxe-column>
        <vxe-column field="unit" width="100" title="请购单位" show-overflow align="center">
          <template #default="{ row }"> {{ row.unit }}</template>
        </vxe-column>
        <vxe-column field="totalAmount" width="100" title="请购合计" show-overflow align="center">
          <template #default="{ row }"> {{ row.totalAmount }}</template>
        </vxe-column>
        <vxe-column field="purchasedQuantity" width="100" title="已请购数量" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ row.purchasedQuantity }}</template>
        </vxe-column>
        <vxe-column field="purchaserName" width="120" title="采购人员" show-overflow align="center">
          <template #default="{ row }"> {{ row.purchaserName }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="100" title="请购日期" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ EFTimeFormatConversion(row.requirementDate) }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="单据日期" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ EFTimeFormatConversion(row.time) }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="100" title="预定交货日" show-overflow align="center" sortable>
          <template #default="{ row }"> {{ EFTimeFormatConversion(row.deliveryDate) }}</template>
        </vxe-column>
        <vxe-column title="加急" width="100" show-overflow align="center">
          <template #default="{ row }">
            <a-tag v-if="row.urgentCode == 'N'" color="#00b42a" size="mini">非加急</a-tag>
            <a-tag v-else color="#f53f3f" size="mini">加急</a-tag></template
          >
        </vxe-column>
        <vxe-column title="状态" width="100" show-overflow align="center">
          <template #default="{ row }">
            <a-tag v-if="row.status == '异常订单'" color="#f53f3f" size="mini"> {{ row.status }}</a-tag>
            <a-tag v-if="row.status == '临近日期'" color="#ff5722" size="mini"> {{ row.status }}</a-tag>
            <a-tag v-if="row.status == '已完成'" color="#00b42a" size="mini"> {{ row.status }}</a-tag>
            <a-tag v-if="row.status == '待处理'" color="#165dff" size="mini"> {{ row.status }}</a-tag>
            <a-tag v-if="row.status == '待处理完成'" color="#0fc6c2" size="mini"> {{ row.status }}</a-tag>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="init"
      >
      </vxe-pager>
      <div class="formHeader-criteria-postizz">
        <a-button type="primary" @click="purchaseOrderGeneration">生成采购单</a-button>
      </div>
    </a-card>
    <a-modal v-model:visible="visible" width="1400px" @ok="visible = false" @cancel="visible = false">
      <template #title> 详情查看 </template>
      <div>
        <a-descriptions v-if="visible" :data="desData" bordered />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './buyingRequisition';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion, isNullPm } from '@/utils/baseMethods';
import { categoriesTaxesList } from '@/utils/base';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup },
  setup() {
    const {
      base,
      handlePageChange,
      handlePageSizeChange,
      init,
      selectChange,
      purchaseOrderGeneration,
      selectAllChangeEvent,
      selectChangeEvent,
      menuConfig,
      contextMenuBodyClickEvent,
      resetSelectItem,
      reset,
    } = importConfig();
    init();
    return {
      ...toRefs(base),
      handlePageChange,
      handlePageSizeChange,
      init,
      selectChange,
      purchaseOrderGeneration,
      EFTimeFormatConversion,
      selectAllChangeEvent,
      selectChangeEvent,
      menuConfig,
      contextMenuBodyClickEvent,
      resetSelectItem,
      reset,
      isNullPm,
      categoriesTaxesList,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
  &-pimasn {
    width: 220px;
    &-onminc {
      display: block;
      padding-bottom: 10px;
    }
  }
}
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.itemoption {
  font-size: 12px;
  color: #999;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  &-aspanasm {
    font-size: 14px;
    font-weight: 900;
    color: #3d528b;
    padding-left: 10px;
  }
  &-ioasdoasn {
    width: 300px;
    display: inline-block;
    white-space: normal;
  }
}
</style>
